No digo que sea una novedad ni espectacular pero es un menú muy sencillo, tan sencillo que lo vamos a añadir todo en un gadget de HTML y ahí ya tenemos marcadas las partes que podemos cambiar.
Para los enlaces hacemos como siempre, sustituimos "url-enlace" por la url de nuestro enlace y en "Enlace 1-2-3-4-5-6" por nuestro texto que hará de enlace.

<style>
ul.arrowunderline{
list-style-type:none;
margin:0;
padding:0;
text-align:center; /*  puede ser "left", "right" o "center"  */
font: bold 18px Georgia; /* tamaño de fuente */
}
ul.arrowunderline li{
display:inline;
margin-right:25px; /* espacio entre enlaces */
}
ul.arrowunderline li a{ /* el color de texto es black */
position:relative;
color:black;
padding-bottom:8px; /* espacio entre la flecha y el texto */
text-decoration:none;
}
ul.arrowunderline li a:hover{
border-bottom:3px solid red; /* grosor línea de la flecha el color es red */
}
ul.arrowunderline li a:hover:after{
content:'';
width:0;
height:0;
position:absolute;
left:50%;
margin-left:-5px;
bottom: 0;
border-width:5px;
border-style:solid;
border-color: transparent transparent red transparent; /* el color de la flecha es red */
}
</style>

<ul class="arrowunderline">
<li><a href="url-enlace">Enlace 1</a></li>
<li><a href="url-enlace">Enlace 2</a></li>
<li class="selected"><a href="url-enlace">Enlace 3</a></li>
<li><a href="url-enlace">Enlace 4</a></li>
<li><a href="url-enlace">Enlace 5</a></li>
<li><a href="url-enlace">Enlace 6</a></li>
</ul>
enrique

Gracias, Gem@, no sabés lo justito que me ha venido ésto, casi como caído del cielo. Sencillo pero muy práctico, de verdad. Gracias! :) http://elpatiodelashortensias.blogspot.com/

Responder
Gem@

:: Pues que bien que me digas eso Enrique :)

Responder
enrique

Gema, tengo un problemilla y por más que he buscado no he podido dar con la solución. Resulta que tengo un blog en donde los enlaces se abren siempre en una ventana nueva. En particular en ese blog no quiero que la cosa funcione así, quiero que los enlaces se abran en la misma ventana del blog. Como te digo, no he dado con la solución, si puedes ayudarme sería estupendo. Gracias!

Responder
enrique

Antes que me digas nada, Gem@, ya lo conseguí. Era bastante complicado porque se trata de una plantilla adaptada, en fin, pero como te digo ya encontré la solución después de muuuucho sudar, ja. Así que bueno, listo.

Responder
Gem@

:: Estupendo Enrique seguramente era un script que los abre todos en ventana nueva :)

Responder
EpideMia

gema, en algun momento quité la navar de mi blog. hay alguna forma de poner un menú como este en su lugar??


gracias

Responder
Gem@

:: EpideMia lo puedes hacer de dos formas una y las más sencilla es añadirlo directamente a la plantilla justo antes del header, es decir añadir lo mismo que lo haríamos en un gadget de html.
(Siempre que trabajamos directamente en la plantilla hay que estar seguros de tener copia de respaldo)

Y la otra es crear una sección si es que no la tienes para añadir gadgets justo antes también del header.

Responder
Robophobia

Hola!
Y como hago para centrarlo?

Gracias

Responder
Gem@

:: Debería quedar centrado Robophobia ¿se puede ver el ejemplo en algún sitio?

Responder
♥ Ana

Hola Gem@ :D, acabo de poner éste menú en mi blog, ahora lo estoy tuneando un poquito, le he puesto sombras (truco que te copié a ti en su día)y quería ver si puedo poner la primera letra más grande que el resto, al igual que tengo en otras partes del blog pero, de momento, no hay manera, jejejeje
Me gusta mucho el diseño sencillo pero, elegante,y, además, muy fácil de poner en el blog, miles de gracias
Una pregunta, al estar puesto en un gadget ¿no ralentiza la carga del blog un poco?, es que estoy eliminando algunas cosas del blog para que tarde menos en cargar, ya he conseguido rebajar un poco el tiempo de carga y, aún me quedan cosas por quitar, por eso te lo preguntaba
Pues, dicho ésto, gracias de nuevo por todas las ideas que nos das, da gusto darse un paseo por tu blog y encontrar tantas cosas interesantes. :)

Responder
Megan

gracias nuevamente por la info, en mi sitio de juegos de chicas lo pondré en la sección de blog

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top